<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
    *{      
      -webkit-touch-callout: auto; /* prevent callout to copy image, etc when tap to hold */      
      -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */      
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */       
      -webkit-user-select:none;
    }  
    html,body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      max-width: 800px;
    }
    #paper {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 75%;
      height: 0px;
    }
  </style>
</head>
<body>
  <button onclick="pausePlayer()">pause</button>
  <button onclick="resumePlayer()">resume</button>
  <button onclick="speedUp()">speedUp</button>
  <div id="paper"></div>
  
  <script src="/js/spritejs.js"></script>
  <script>
const scene = new spritejs.Scene('#paper'),
      fglayer = scene.layer('fglayer'),
      Sprite = spritejs.Sprite,
      Group = spritejs.Group

scene.setResolution(800, 600) 

const s1 = new Sprite()
s1.attr({
  pos: [100, 100],
  size: [50, 50],
  bgcolor: 'red',
  rotate: 90,
})

const s2 = new Sprite()
s2.attr({
  pos: [100, 100],
  size: [50, 50],
  bgcolor: 'green',
  rotate: 180,
})

const s3 = new Sprite()
s3.attr({
  pos: [100, 100],
  size: [50, 50],
  bgcolor: 'blue',
})

const s4 = new Sprite()
s4.attr({
  pos: [100, 100],
  size: [50, 50],
  bgcolor: 'blue',
})

const group = new Group()

group.append(s1, s2, s3)
fglayer.appendChild(s4)
fglayer.append(group)

group.attr({
  anchor: 0.5,
  pos: [200, 200],
  rotate: 0, 
  border: [1, 'red'],
  size: [200, 200],
})

s1.on('click', evt => {
  console.log(evt)
})

group.animate([
  {rotate: 360}
], {
  duration: 2000,
  iterations: Infinity,
  direction: 'reverse',
})

s1.animate([
  {rotate: 450}
], {
  duration: 1000,
  iterations: Infinity,
})

s2.animate([
  {rotate: 540}
], {
  duration: 1000,
  iterations: Infinity,
})

s3.animate([
  {rotate: 360}
], {
  duration: 1000,
  iterations: Infinity,
})
s4.animate([
  {rotate: 360}
], {
  duration: 1000,
  iterations: Infinity,
})


window.addEventListener('resize', evt => {
  scene.setViewport('auto', 'auto')
})

function pausePlayer () {
  fglayer.timeline.playbackRate = 0
  console.log(fglayer.timeline)
}
function resumePlayer () {
  fglayer.timeline.playbackRate = 1
  console.log(fglayer.timeline)
}
   
function speedUp () {
  fglayer.timeline.playbackRate += 0.1
}
  </script>
</body>
</html>